<template>
  <Card :bordered="false">
    <div slot="title" class="clear">
      <Button type="primary" class="addBtn" @click="showModal('add')">新增</Button>
    </div>
    <Table :columns="columns" :data="roleList" :loading="loading"></Table>
    <AddRoleModal
      ref="modal"
      :modalTitle="modalTitle"
      @handleSubmit="handleSubmit"
    />
  </Card>
</template>

<script>
import { Divider } from 'iview'
import dayjs from 'dayjs'
import AddRoleModal from './components/AddRoleModal'
import { queryRoleListData, deleteRole } from '@/api/role-manage.js'

export default {
  name: 'role-manage',
  components: { AddRoleModal },
  data () {
    return {
      columns: [],
      loading: false,
      modalTitle: '新增角色',
      roleList: []
    }
  },
  methods: {
    showModal (type, row = {}) {
      if (type === 'add') {
        this.modalTitle = '新增角色'
      } else {
        this.modalTitle = '编辑角色'
      }
      this.$refs['modal'].isShowModal(type, row)
    },
    handleSubmit () {
      this.queryTableData({page: 1})
    },
    setColumns () {
      this.columns = [
        {
          key: 'roleName',
          title: '角色名称'
        }, {
          key: 'description',
          title: '备注'
        }, {
          key: 'updateUserName',
          title: '编辑人'
        }, {
          key: 'updateTime',
          title: '编辑时间',
          render: (h, { row }) => {
            return (
              <span>{dayjs().format('YYYY-MM-DD')}</span>
            )
          }
        }, {
          key: 'createUserName',
          title: '创建人'
        }, {
          key: 'createTime',
          title: '创建时间',
          render: (h, { row }) => {
            return (
              <span>{dayjs().format('YYYY-MM-DD')}</span>
            )
          }
        }, {
          key: 'action',
          title: '操作',
          render: (h, { row }) => {
            const self = this
            return (
              <span>
                <a onClick={ () => self.showModal('edit', row) } >编辑</a>
                <Divider type="vertical" />
                <a onClick={ () => self.handleDelete(row) }>删除</a>
              </span>
            )
          }
        }
      ]
    },
    handleDelete (row) {
      const self = this
      this.$Modal.confirm({
        title: '您确定删除该角色？',
        content: '',
        onOk: function () {
          deleteRole(row.roleCode).then().then((response) => {
            const { data } = response
            if (data.code === 2000) {
              self.queryTableData({page: 1})
              this.$Message.success('删除成功')
            } else {
              this.$Message.error(data.msg || '系统错误，请稍后再试')
            }
          })
        }
      })
    },
    // 暂不做分页
    queryTableData ({page = 1, size = 10}) {
      this.loading = true
      queryRoleListData({page, size}).then((response) => {
        const { data } = response
        if (data.code === 2000) {
          this.roleList = data.data.items || []
        } else {
          this.$Message.error(data.msg || '系统错误，请稍后再试')
        }
        this.loading = false
      })
    }
  },
  mounted () {
    this.setColumns()
    this.queryTableData({page: 1})
  }
}
</script>
<style lang="less">
  .addBtn {
    float: right;
  }
</style>
